<template>
	<view class="page">
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 300px" :iconPath="iconPath" :scale="12" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
			</view>
		</view>
		<view class="seach">
			<view class="" style="width: 82%; margin-right: 45rpx">
				<u-search
					bgColor="#FFFFFF"
					shape="square"
					@search="search"
					@change="change"
					:showAction="false"
					:clearabled="true"
					placeholder="输入钓点名称"
					v-model="keyword"
				></u-search>
			</view>
			<view class="">
				<switch style="width: 84rpx; height: 45rpx" color="#3681F3" checked @change="switch1Change" />
				<view class="advertising">广告开关</view>
			</view>
		</view>
		<view class="location">
			<view class="">{{ locat }}</view>
			<image src="../../static/dingwei.png" mode="" @click="chooseLocation"></image>
		</view>

		<view class="">
			<view class="name" @click="chooseLocation">钓点专区</view>
			<view class="info">
				<view class="uni-list">
					<view class="des">
						钓点分类
						<span class="sp">*</span>
					</view>
					<view class="rig">
						<view class="riggs" @click="toggle('top')">{{ cates }}</view>

						<image class="moreImg" src="../../static/more.png" mode=""></image>
					</view>
				</view>

				<radio-group class="uni-list" @change="radioChange2">
					<view class="des">
						是否收费
						<span class="sp">*</span>
					</view>
					<view class="uni-list-cell" v-for="(item, index) in items2" :key="item.value">
						<view>
							{{ item.name }}
							<radio style="margin-left: 20rpx" color="#4f98f6" :value="item.value" :checked="index === current2" />
						</view>
					</view>
				</radio-group>
				<view class="uni-list">
					<view class="des">
						钓场电话
						<span class="sp">*</span>
					</view>
					<view class="rig">
						<input
							type="text"
							v-model="fish"
							@input="Input3"
							maxlength="11"
							placeholder="请输入"
							style="text-align: right"
							placeholder-style="font-weight: 500; font-size: 29rpx; color: #999999; text-align:right;"
						/>
						<image class="moreImg" src="../../static/more.png" mode=""></image>
					</view>
				</view>
				<view class="uni-list">
					<view class="des">
						水深
						<span class="sp">*</span>
					</view>
					<view class="rig">
						<input
							type="text"
							v-model="location"
							@input="Input4"
							placeholder="请输入"
							style="text-align: right"
							placeholder-style="font-weight: 500; font-size: 29rpx; color: #999999; text-align:right;"
						/>
						<image class="moreImg" src="../../static/more.png" mode=""></image>
					</view>
				</view>
				<view class="uni-list">
					<view class="des">
						杆长
						<span class="sp">*</span>
					</view>
					<view class="rig">
						<input
							type="text"
							v-model="phone"
							@input="Input5"
							placeholder="请输入"
							style="text-align: right"
							placeholder-style="font-weight: 500; font-size: 29rpx; color: #999999; text-align:right;"
						/>
						<image class="moreImg" src="../../static/more.png" mode=""></image>
					</view>
				</view>
			</view>

			<view class="info">
				<view class="" style="">
					<view class="name" style="margin: 0">鱼获图片(选填)</view>
					<view class="imgList">
						<block v-for="(item,index) in imgList" :key="index">
							<view class="img">
								<image :src="item" mode="widthFix" @click.stop="previewImg(index)"></image>
								<view class="del_btn" @click.stop="del(index)">
									<uni-icons type="close" size="20"></uni-icons>
								</view>
							</view>
						</block>
						<view class="up" @click="upImg" v-if="imgList.length < 3">
							<view class="upload" style="margin: 20rpx 0 27rpx" v-if="imgList.length ==0">上传鱼获图片可提升播放量</view>
							<image class="picImg" src="../../static/pic.png" mode="" ></image>
						</view>
					</view>
				</view>
			</view>
			<view class="info" style="">
				<view class="name" style="margin: 0">钓点详情(选填)</view>
				<view class="up">
					<textarea
						class="placs"
						name=""
						placeholder-class="plac"
						id=""
						cols="30"
						rows="10"
						placeholder="钓点详情可填写：放鱼时间、数量、鱼种、规则、路况、能 否直达钓位，什么时间段好钓等"
						@input="fishDet"
					></textarea>
				</view>
			</view>
			<view class="add" @click="save('0')">保存</view>
			<view class="zhibo" @click="save('1')">直播挂载</view>
		</view>
		<view class="explain">广告说明：为防止刷数据，拉低广告单价，仅自然推流场景才统计广告次数，自看、互看等场景均不统计</view>
		<view class="advert">
			<view class="adverTop">
				<view class="">广告统计：0</view>
				<view class="">钓点收益：￥0</view>
			</view>
			<view class="statistics">
				<view class="">日期</view>
				<view class="">广告统计</view>
				<view class="">收益</view>
			</view>
			<view class="rate" v-for="item in 3" :key="item">
				<view class="">2024-02-21</view>
				<view class="" style="margin-right: 100rpx">6</view>
				<view class="">10</view>
			</view>
		</view>
		<!-- 弹出 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup">
				<view :class="item.select != true ? 'popItem' : 'popItem1'" v-for="(item, index) in list3" @click="select(item.id, item)">{{ item.name }}</view>
				<!-- <view :class="item.id != cid ? 'popItem' : 'popItem1'" v-for="(item, index) in list3" @click="select(index, item.name)">{{ item.name }}</view> -->
			</view>
			<view class="anniu">
				<view class="canle" @click="close">取消</view>
				<view class="canle" @click="confirm">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import common from '../../request.js';
export default {
	data() {
		return {
			luya: true,
			prize: '',
			spotName: '',
			fish: '',
			location: '',
			phone: '',
			erliao: '',
			money: '',
			addressInfo: '',
			// cid: -1, //选择钓点分类
			cates: '请选择(可多选)',
			selectCate: [],
			imgList: [],
			pushList: [],
			cattes:[],
			list3: [],
			items: [
				{
					value: 'USA',
					name: '是',
					checked: 'true'
				},
				{
					value: 'CHN',
					name: '否'
				}
			],
			items1: [
				{
					value: 'USA',
					name: '是',
					checked: 'true'
				},
				{
					value: 'CHN',
					name: '否'
				}
			],
			items2: [
				{
					value: 'USA',
					name: '是',
					checked: 'true'
				},
				{
					value: 'CHN',
					name: '否'
				}
			],
			current: 0,
			current1: 0,
			current2: 0,

			showSpot: true,
			locat: '请选择钓点位置',
			spotName: '',
			keyword: '', //搜索框的输入值
			id: 0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 30.66,
			longitude: 104.1,
			// iconPath: '/static/weizhi.png',
			info:{
				guanggaokaiguan:1,//广告开发默认开
			},
			type:1,
			// guanggaokaiguan:1,
			covers: [
				{
					id: 1,
					title: '李家沱234234',
					latitude: 30.68,
					longitude: 104.1,
					// iconPath: '/static/weizhi.png',
					label: '你好'
				},
				
			]
		};
	},
	onLoad() {
		this.getcate();
		// 引入包含了这些变量的模块
	},
	methods: {
		
		close() {
			this.$refs.popup.close();
		},
		confirm() {
			this.$refs.popup.close();
		},
		select(id, it) {
			
			// 选中判断
			this.list3.forEach((item,ind) =>{
				if(id == item.id){
					item.select = !item.select
				}
				console.log('select',id,item.id,item.select,item,ind)
			})
			
			var obj = ""
			this.list3.forEach((ite,indexs) =>{
				if(ite.select == true){
					obj= obj  + ite.name + ','
					this.info.cid = this.info.cid + ite.id + ','
				}
			})
			this.cates = obj
			
			console.log('select111',obj, id,this.list3);
		},
		// 获取分类
		getcate() {
			this.$api.get('index/getIndexData', {}).then((res) => {
				console.log('分类111', res);
				if (res.status == -1) {
					uni.showToast({
						title: res.msg
					});
				} else {
					this.list3 = res.clist;
					console.log('分类111', res);
				}
			});
		},
		// 弹窗
		toggle(type) {
			this.type = type;
			// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
			this.$refs.popup.open(type);
		},
		// 关闭弹窗
		dialogClose() {
			this.$refs.popup.close();
			console.log('点击关闭');
		},
		// 图片上传
		upImg() {
			  let that = this; // 将组件实例的 this 存储在变量 that 中
			uni.chooseMedia({
				count: 9,
				mediaType: ['image'],
				sourceType: ['album', 'camera'],
				maxDuration: 30,
				camera: 'back',
				success: function(res) {
					console.log('文件上传', res, res.tempFiles[0].tempFilePath);
					const myModule = require('../../request.js'); // 替换为实际的路径
					console.log('接口地址', myModule);
					let uploadUrl = `${myModule.imgUrl}` + 'Imageupload/uploadImg/aid/' + '1' + '/platform/' + 'dy' + '/session_id/' + uni.getStorageSync('session_id');
					console.log('333',uploadUrl)
					uni.uploadFile({
						// url: `${myModule.imgUrl}Imageupload/uploadImg`, //仅为示例，非真实的接口地址
						url: uploadUrl, //仅为示例，非真实的接口地址
						
						filePath: res.tempFiles[0].tempFilePath,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: function(uploadFileRes) {
							// const that = this
							console.log('图片结果', uploadFileRes);
							let data = JSON.parse(uploadFileRes.data);
								that.imgList.push(data.url);
								that.pushList.push(data.url);
								that.info.pics = that.pushList.join(",")
							console.log('图片数据data',data,that.info.pics)
						},
						fail:(err)=>{
							console.log('图片失败',err)
						},
						complete: (com) => {
							// uni.hideLoading();
							console.log('图片com',com)
						}
					});
				}
			});
		},
		// 图片放大
		previewImg(index) {
			console.log('图片放大',index)
			uni.previewImage({
				current: index,
				urls: this.imgList,
			});
		},
		// 图片删除
		del(index) {
			console.log("点击", index)
			this.imgList.splice(index, 1)
			this.pushList.splice(index, 1)
		},
		// 输入钓点名称
		change(e) {
			this.spotName = e;
			this.info.name = e
			console.log('输入名称123', e, this.info);
		},
		// 确认输入框
		search(e) {
			console.log('323', e);
		},
		// 广告开关
		switch1Change: function (e) {
			console.log('switch1 发生 change 事件，携带值为', e.detail.value);
			if(e.detail.value == false){
				this.info.guanggaokaiguan = 0
			}else{
				this.info.guanggaokaiguan = 1
			}
			
		},
		// 定位导航
		posit() {
			console.log('定位导航222');
			uni.chooseLocation({
				success: (res) => {
					// let that =this
					this.locat = res.address;
					console.log('locat', this.locat);
					console.log('位置名称：' + res.name, res);
					console.log('详细地址：' + res.address);
					console.log('纬度：' + res.latitude);
					console.log('经度：' + res.longitude);
				}
			});
			console.log('地图选择结束222');
		},
		// 地图
		chooseLocation() {
			let that = this;
			uni.chooseLocation({
				success: (res) => {
					that.addressInfo = res;
					uni.showToast({ title: '操作成功', icon: 'success' });
				},
				fail: (e) => {
					console.error('操作失败:', error);
					console.log('eee', e);
					uni.showToast({ title: '操作失败', icon: 'fail' });
				},
				complete: (com) => {
					this.info.address = com.address
					this.info.latitude = com.latitude
					this.info.longitude = com.longitude
					console.log('chooseLocation-complete', com,this.info);
					this.locat = com.address;
				}
			});
		},
		// 保存|直播挂载
		save(type) {
			console.log('save111',this.info)
				this.$api
					.post('index/fatiediaodian', {
						id: '0',
						info:this.info,
						type:type
					})
					.then((res) => {
						console.log('发布钓点', res);
						uni.showToast({
							title:res.msg
						})
						setTimeout(()=>{
							uni.switchTab({
								url:"/pages/tabs/shouyi"
							})
							console.log('2s跳转')
						},2000)
						console.log('0009')
					});
		},
		radioChange: function (evt) {
			for (let i = 0; i < this.items.length; i++) {
				if (this.items[i].value === evt.detail.value) {
					this.current = i;
					console.log('3434343', this.current);
					break;
				}
			}
		},
		radioChange1: function (evt) {
			for (let i = 0; i < this.items.length; i++) {
				if (this.items1[i].value === evt.detail.value) {
					this.current1 = i;
					console.log('current1', this.current1);
					break;
				}
			}
		},
		radioChange2: function (evt) {
			for (let i = 0; i < this.items2.length; i++) {
				if (this.items2[i].value === evt.detail.value) {
					this.current2 = i;
					this.info.isfree = this.current2
					console.log('current2', this.current2,this.info.isfree);
					break;
				}
			}
		},
		Input1(e) {
			// this.prize = e.target.value
			console.log('990', e.target.value, e);
		},
		Input2(e) {
			this.spotName = e.target.value;
			console.log('991', e.target.value, e);
		},
		// 电话
		Input3(e) {
			this.spotName = e.target.value;
			this.info.tel = e.target.value
			console.log('992', e.target.value, e);
		},
		// 水深
		Input4(e) {
			this.location = e.target.value;
			this.info.shuishen = e.target.value
			console.log('993', e.target.value, this.info.shuishen);
		},
		// 杆长
		Input5(e) {
			this.phone = e.target.value;
			this.info.ganchang = e.target.value
			console.log('994', e.target.value, this.info.ganchang);
		},
		Input6(e) {
			this.erliao = e.target.value;
			console.log('995', e.target.value, e);
		},
		fishDet(e){
			this.info.detail_content = e.target.value
			console.log('996', e.target.value, this.info.detail_content);
		},
		Input7(e) {
			this.money = e.target.value;
			console.log('996', e.target.value, e);
		},

		ly() {
			this.luya = !this.luya;
		}
	}
};
</script>

<style lang="scss">
.page {
	background-color: #f7f7f7;
	padding-bottom: 10rpx;
}
// 弹窗
.popup {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	// margin: 27rpx;
	background-color: #fff;
}
.popItem {
	width: 133rpx;
	height: 43rpx;
	background: #d8ecff;
	border-radius: 22rpx;
	font-weight: 500;
	font-size: 24rpx;
	color: #49a3f9;
	text-align: center;
	line-height: 43rpx;
	margin: 10rpx;
}
// 弹窗
.popup-content {
	@include flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
	height: 50px;
	background-color: #fff;
	color: #000000;
}
.popup {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 27rpx;
	background-color: #fff;
}
.popItem {
	width: 133rpx;
	height: 43rpx;
	background: #f5f5f5;
	border-radius: 22rpx;
	font-weight: 500;
	font-size: 24rpx;
	color: #333333;
	text-align: center;
	line-height: 43rpx;
	margin: 10rpx;
}
.popItem1 {
	width: 133rpx;
	height: 43rpx;
	background: #d8ecff;
	border-radius: 22rpx;
	font-weight: 500;
	font-size: 24rpx;
	color: #49a3f9;
	text-align: center;
	line-height: 43rpx;
	margin: 10rpx;
}
.anniu {
	display: flex;
	justify-content: space-around;
	margin-bottom: 30rpx;
}
.canle {
	width: 150rpx;
	height: 50rpx;
	text-align: center;
	font-size: 24rpx;
	line-height: 50rpx;
	background-color: #49a3f9;
	border-radius: 10rpx;
	color: #fff;
}
// 广告统计
.advert {
	margin: 27rpx;
}
.adverTop {
	display: flex;
	justify-content: space-between;
	font-weight: bold;
	font-size: 24rpx;
	color: #333333;
	line-height: 32rpx;
}
.statistics {
	display: flex;
	justify-content: space-between;
	// grid-template-columns: repeat(3,1fr);
	text-align: center;
	font-weight: 500;
	font-size: 24rpx;
	color: #333333;
	line-height: 32rpx;
	margin-top: 20rpx;
}
.rate {
	display: flex;
	justify-content: space-between;
	// grid-template-columns: repeat(3,1fr);
	text-align: center;
	font-weight: 500;
	font-size: 24rpx;
	color: #333333;
	line-height: 32rpx;
	margin-top: 20rpx;
}
.explain {
	font-weight: 500;
	font-size: 24rpx;
	color: #333333;
	margin: 30rpx 27rpx;
}
.seach {
	margin: 31rpx 27rpx;
	display: flex;
}
.advertising {
	width: 79rpx;
	height: 19rpx;
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 20rpx;
	color: #999999;
	margin-top: 10rpx;
	// line-height: 32rpx;
}
.location {
	margin: 22rpx 27rpx;
	height: 67rpx;
	background-color: #fff;
	font-weight: 500;
	font-size: 27rpx;
	color: #333333;
	line-height: 67rpx;
	display: flex;
	justify-content: space-between;
	image {
		width: 25rpx;
		height: 27rpx;
		margin: 18rpx;
	}
}
button {
	height: 87rpx;
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 24rpx;
	color: #333333;
	margin: 40rpx 27rpx 0;
	background: #3681f3;
	border-radius: 13rpx;
	font-weight: 500;
	font-size: 29rpx;
	color: #ffffff;
}
.plac {
	font-weight: 500;
	font-size: 24rpx;
	color: #b3b3b3;
	line-height: 32rpx;
	margin-top: 30rpx;
}
.placs {
	margin-top: 20rpx;
}

//

.name {
	font-weight: bold;
	font-size: 32rpx;
	color: #1a1a1a;
	margin: 27rpx;
}
.imgList {
				display: grid;
				grid-template-columns: repeat(3,1fr);
				align-items: center;
				}
.info {
	margin: 20rpx 6rpx;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 40rpx 34rpx 40rpx;
	margin: 27rpx;
	.img {
		margin-right: 20rpx;
		position: relative;
		width: 210rpx;
		>image{
			width: 210rpx;
			// height: 150rpx;
			
		}
		
		.del_btn {
			position: absolute;
			top: -10rpx;
			right: -10rpx;
			z-index: 99;
		}
	}
}
.opt {
	width: 100rpx;
	height: 40rpx;
	background: #f0f0f0;
	border-radius: 7rpx;
	font-weight: 500;
	font-size: 24rpx;
	color: #999999;
	text-align: center;
	line-height: 40rpx;
}
.opt1 {
	width: 100rpx;
	height: 40rpx;
	background: #e0eeff;
	border-radius: 7rpx;
	font-weight: 500;
	font-size: 24rpx;
	color: #4f98f6;
	text-align: center;
	line-height: 40rpx;
}
.uni-list {
	display: flex;
	justify-content: space-between;
	margin: 20rpx 0;
}
.uni-list-cell {
	display: flex;
	justify-content: space-between;
	font-weight: 500;
	font-size: 29rpx;
	color: #333333;
	// justify-content: space-between;
}
.des {
	font-weight: 500;
	font-size: 29rpx;
	color: #333333;
}
.riggs {
	font-weight: 500;
	font-size: 29rpx;
	color: #999999;
	// line-height: 40rpx;
}
.sp {
	color: #f30c0c;
}
.rig {
	display: flex;
}
.up {
}
.upload {
	font-weight: 500;
	font-size: 24rpx;
	color: #999999;
}

.picImg {
	width: 133rpx;
	height: 133rpx;
}
.moreImg {
	width: 11rpx;
	height: 19rpx;
	margin-left: 17rpx;
	margin-top: 20rpx;
}
.add {
	width: 697rpx;
	height: 67rpx;
	background: #3681f3;
	border-radius: 13rpx;
	border: 1px solid #3681f3;
	text-align: center;
	line-height: 67rpx;
	font-weight: 500;
	font-size: 27rpx;
	color: #fff;
	margin: 32rpx 27rpx;
}
.zhibo {
	width: 697rpx;
	height: 67rpx;
	background: #ecf4ff;
	border-radius: 13rpx;
	border: 1px solid #3681f3;
	text-align: center;
	line-height: 67rpx;
	font-weight: 500;
	font-size: 27rpx;
	color: #3681f3;
	margin: 32rpx 27rpx;
	// margin-bottom: 200rpx;
}

// 弹窗
.popup-content {
	@include flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
	height: 50px;
	background-color: #fff;
}
</style>